import React from "react";
import { Button,Card,Col,Divider,Form,Icon,Input,notification,Row, Radio} from "antd";
import { loadProjectDetail, addProject } from "@/services/ProjectCenter";
import moment from "moment";
import styles from "./styles.less";
import { formatMessage } from "umi-plugin-react/locale";
import Loading from "@/components/Loading";
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

class ProjectAddForm extends React.Component {
  constructor(props) {
    super(props);
    const id= props.id
    const type = props.type

    this.state = {
      loading: false, // 用户详细信息的加载状态，用户页面loading效果
      submiting: false, // 表单提交状态
      detail: {}, // 
      editorState: null,
      type:type,
      id 
    };
  }

  async componentDidMount() {
    if(this.state.id){
      this.loadData(this.state.id);
    }
  }

  // 加载用户信息
  loadData = async id => {
    this.setState({ loading: true });
    loadProjectDetail(id)
      .then(res => {
        this.setState({
          detail:res,
          isHuaWei: res.isHuaWei
        });
        
      })
      .finally(() => {
        this.setState({
          loading: false
        });
      });

  };

  onRadioChange = e => {
    this.setState({isHuaWei:e.target.value})
  }

  handleSubmit = async e => {
    e.preventDefault();
    if (this.submiting) {
      return;
    }
    // setState为异步动作，直接设置submiting变量作为限制
    this.submiting = true;
    this.setState({
      submiting: true
    });
    this.props.form.validateFields(async (err, fieldsValue) => {
      if (err) {
        this.submiting = false;
        this.setState({
          submiting: false
        });
        return;
      }

      const params = {
        id: this.state.id,
        projectName:fieldsValue.projectName,
        isHuaWei:this.state.isHuaWei,
        sort:fieldsValue.sort
      };

      addProject(params).then(res => {
        this.submiting = false;
        this.setState({
          submiting: false
        });
        if (res && res.status !== 200) {
        } else {
          notification.success({
            message: "添加成功"
          });
          this.props.handleAddCancel();
          this.props.refresh();
        }
      });
    });
  };



  render() {
    const { getFieldDecorator } = this.props.form;
    const { submiting} = this.state;

    const titleExtraButton = (
      <Row type="flex" gutter={12} align="middle">
        <Col>
          <Button
            type="primary"
            loading={submiting}
            onClick={this.handleSubmit}
          >
            提交
          </Button>
        </Col>
        <Col>
          <Button onClick={this.props.handleAddCancel}>返回</Button>
        </Col>
      </Row>
    );

    const { detail, loading} = this.state;

    const rowGutter = [16, 16]; 
    return (
      <Card>
        {loading ? (
          <Loading />
        ) : (
          <Form labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal">


                <Row gutter={rowGutter}>

                    <Form.Item label="项目名称">
                      {getFieldDecorator("projectName", {
                        initialValue: detail.projectName?detail.projectName:'',
                        rules: [
                          {
                            required: true,
                            message: formatMessage({
                              id: "请输入项目名称"
                            })
                          }
                        ]
                      })(<Input style={{width: 300 }} />)}
                    </Form.Item>

                </Row>
                <Row gutter={rowGutter}> 

                    <Form.Item label="华为项目:">
                    <Radio.Group onChange={this.onRadioChange} value={this.state.isHuaWei ? this.state.isHuaWei : 0}>
                      <Radio value={1}>是</Radio>
                      <Radio value={0}>否</Radio>
                    </Radio.Group>
                    </Form.Item>

                </Row>
                <Row gutter={rowGutter}>

                    <Form.Item label="排序">
                      {getFieldDecorator("sort", {
                        initialValue: detail.sort?detail.sort:0,
                      })(<Input style={{width: 200 }} />)}
                    </Form.Item>

                </Row>


            <Row gutter={rowGutter}>
              <Col span={24} style={{marginLeft:'110px',marginTop:'20px'}}>
                {titleExtraButton}
              </Col>
            </Row>
          </Form>
        )}
      </Card>
    );
  }
}

const WrappedProjectAddForm = Form.create({ name: "Project_add" })(
  ProjectAddForm
);
export default WrappedProjectAddForm;
